<template>
    <div>
        <div class="clearfix">
            <div class="detila-div-80">
                <div>
                    <div class="radius-container">
                        <div class="border-b pad-10 font-w font-15">基本信息</div>

                        <div class="pad-20">
                            <el-form :model="form" label-width="160px" :rules="rules" ref="form">
                                <el-form-item label="轮番图">
                                  <div class="flex">
                                    <draggable id="swiper-box" tag="span"
                                      v-model="form.goodsBannerDTOS" dragable="true"
                                      :move="getdata" @update="datadragEnd">
                                      <template v-for="(item, key) in form.goodsBannerDTOS">
                                        <div class="pic-bar mar-r-30 flex-item" :key="key"
                                          @mouseover.stop="itemOver(key)"
                                          @mouseout.stop="itemOut(-1)">
                                          <div @click="deletePic(item,key)">
                                            <svg-icon icon-class="close"
                                              :class="{'active':key==curIndex || key==curHover}"
                                              class="close-icon font-16 noraml-hide close-pos" />
                                          </div>
                                          <img class="picture" :src="item.bannerImage"/>
                                        </div>
                                      </template>
                                    </draggable>
                                    <el-upload v-if="form.goodsBannerDTOS.length < 5"
                                      list-type="picture-card"
                                      action="/api/common/uploadFiles"
                                      accept="image/jpeg,image/gif,image/png,image/bmp"
                                      name="files" multiple
                                      :data="token"
                                      :show-file-list="false"
                                      v-loading="oneLoading"
                                      :on-success="handleUploadSuccessBanner"
                                      :before-upload="beforeOneUpload">
                                      <i class="el-icon-plus"></i>
                                    </el-upload>
                                  </div>
                                  <div class="tips">建议尺寸：750*750像素，可以拖拽图片调整顺序，最多上传5张</div>
                                </el-form-item>
                                <el-form-item label="店铺LOGO" prop="enterpriseLogo" class="mar-b-7">
                                  <el-upload class="avatar-uploader"
                                    action="/api/common/uploadFiles"
                                    accept="image/jpeg,image/gif,image/png,image/bmp"
                                    :before-upload="beforeUpload"
                                    name="files" :data="token"
                                    :show-file-list="false"
                                    :on-success="handleUploadSuccess">
                                      <img v-if="form.enterpriseLogo"
                                        :src="form.enterpriseLogo" class="width-100 height-100">
                                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                  </el-upload>
                                </el-form-item>
                                <el-form-item label="店铺名称" prop="enterpriseName">
                                    <el-col :span="10">
                                      <el-input v-model="form.enterpriseName" maxlength="12" placeholder="标题最多12个字" />
                                    </el-col>
                                </el-form-item>
                                <el-form-item label="店铺主营" prop="mainCampId">
                                    <el-col :span="10">
                                        <el-select v-model="form.mainCampId" class="width-per-100" placeholder="请选择主营">
                                          <el-option v-for="item in mainCampList" :key="item.mainCampId" :label="item.mainCampName" :value="item.mainCampId">
                                          </el-option>
                                        </el-select>
                                    </el-col>
                                </el-form-item>
                                <el-form-item label="品牌证书">
                                  <div class="flex">
                                      <draggable id="content-box" tag="span"
                                          v-model="form.enterpriseQualificationsImagesDTOS" dragable="true"
                                          :move="getdata" @update="datadragEnd">
                                        <template v-for="(item, key) in form.enterpriseQualificationsImagesDTOS">
                                          <div class="pic-bar mar-r-30 flex-item" :key="key"
                                              @mouseover.stop="itemTwoOver(key)"
                                              @mouseout.stop="itemTwoOut(-1)">
                                            <div @click="deleteQualificationsPic(item,key)">
                                              <svg-icon icon-class="close"
                                                :class="{'active':key==curTwoIndex || key==curTwoHover}"
                                                class="close-icon font-16 noraml-hide close-pos" />
                                            </div>
                                            <img class="picture" :src="item.imageUrl"/>
                                          </div>
                                        </template>
                                      </draggable>
                                      <el-upload v-if="form.enterpriseQualificationsImagesDTOS.length < 5"
                                        list-type="picture-card"
                                        action="/api/common/uploadFiles"
                                        accept="image/jpeg,image/gif,image/png,image/bmp"
                                        name="files" multiple
                                        :data="token"
                                        :show-file-list="false"
                                        v-loading="twoLoading"
                                        :on-success="handleUploadSuccessQualifications"
                                        :before-upload="beforeTwoUpload">
                                        <i class="el-icon-plus"></i>
                                      </el-upload>
                                  </div>
                                  <div class="tips">建议尺寸：750*750像素，可以拖拽图片调整顺序，最多上传5张</div>
                                </el-form-item>
                                <el-form-item label="品牌信息" prop="enterpriseIntroduce">
                                  <el-col :span="10">
                                    <el-input  v-model="form.enterpriseIntroduce" class="width-per-100"
                                      type="textarea" :rows="5">
                                    </el-input>
                                  </el-col>
                                </el-form-item>
                                <el-form-item label="标签名称" prop="labelName">
                                  <el-row class="mar-b-10">
                                    <el-col :span="8">
                                      <el-input v-model="form.labelNameRecommend" maxlength="4"/>
                                    </el-col>
                                  </el-row>
                                  <el-row class="mar-b-10">
                                    <el-col :span="8">
                                      <el-input v-model="form.labelNameHot" maxlength="4"/>
                                    </el-col>
                                  </el-row>
                                  <el-row class="mar-b-5">
                                    <el-col :span="8">
                                      <el-input v-model="form.labelNameNew" maxlength="4"/>
                                    </el-col>
                                  </el-row>
                                  <div class="tips">标签名称不能为空，字数长度最多4字</div>
                                </el-form-item>
                                <el-form-item label="分销佣金" prop="minProfit" v-if="false">
                                  <el-row class="flex" :gutter="20">
                                    <el-col :span="5">
                                      <el-input v-model="form.minProfit" placeholder="请输入最低收益">
                                        <template slot="append">%</template>
                                      </el-input>
                                    </el-col>
                                    <el-col :span="1">
                                      <span>~</span>
                                    </el-col>
                                    <el-col :span="5">
                                      <el-input v-model="form.maxProfit" placeholder="请输入最高收益">
                                        <template slot="append">%</template>
                                      </el-input>
                                    </el-col>
                                  </el-row>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="radius-container container-nonebg">
            <el-form label-width="80px">
                <el-button type="primary" @click="saveShopSetting">保存</el-button>
            </el-form>
        </div>
    </div>
</template>

<script>
  import { listMainCamp } from '@/api/user/enterprise'
  import { getToken } from '@/utils/auth'
  import { getShopSetting, saveShopSetting } from '@/api/goods/goods'
  import draggable from 'vuedraggable'

  export default {
    components: {
      draggable
    },
    data() {
      return {
        form: {
          enterpriseId: this.getEnterpriseId(),
          enterpriseName: '',
          enterpriseLogo: '',
          mainCampId: '',
          minProfit: '',
          maxProfit: '',
          enterpriseIntroduce: '',
          goodsBannerDTOS: [],
          labelNameRecommend: '',
          labelNameHot: '',
          labelNameNew: '',
          enterpriseQualificationsImagesDTOS: []
        },
        mainCampList: [],
        curIndex: -1,
        curHover: -1,
        curTwoIndex: -1,
        curTwoHover: -1,
        oneLoading: false,
        twoLoading: false,
        enterpriseId: this.getEnterpriseId(),
        listLoading: false,
        rules: {
          enterpriseName: [
            { required: true, message: '店铺名称', trigger: 'blur' }
          ],
          enterpriseIntroduce: [
            { required: true, max: 200, message: '不能为空，且不能超过200个字符', trigger: 'blur' }
          ],
          enterpriseLogo: [
            { required: true, message: '店铺Logo', trigger: 'blur' }
          ],
          mainCampId: [
            { required: true, message: '请输入主营', trigger: 'blur' }
          ]
        },
        token: {}
      }
    },
    created() {
      this.listMainCamp()
      this.initEnterprise()
      this.token = { accessToken: getToken() }
    },
    methods: {
      initEnterprise() {
        var data = {
          enterpriseId: this.getEnterpriseId()
        }
        getShopSetting(data).then(response => {
          if (response.data != null) {
            this.form.enterpriseName = response.data.enterpriseName
            this.form.enterpriseLogo = response.data.enterpriseLogo
            this.form.mainCampId = response.data.mainCampId
            this.form.minProfit = response.data.minProfit
            this.form.maxProfit = response.data.maxProfit
            this.form.goodsBannerDTOS = response.data.goodsBannerDTOS
            this.form.enterpriseIntroduce = response.data.enterpriseIntroduce
            this.form.enterpriseQualificationsImagesDTOS = response.data.enterpriseQualificationsImagesDTOS
            this.form.labelNameRecommend = response.data.labelNameRecommend
            this.form.labelNameHot = response.data.labelNameHot
            this.form.labelNameNew = response.data.labelNameNew
          }
        })
      },
      listMainCamp() {
        listMainCamp().then(response => {
          this.mainCampList = response.data
        })
      },
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isGIF = file.type === 'image/gif'
        const isPNG = file.type === 'image/png'
        const isBMP = file.type === 'image/bmp'

        if (!isJPG && !isGIF && !isPNG && !isBMP) {
          this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!')
        }
        return (isJPG || isBMP || isGIF || isPNG)
      },
      beforeOneUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isGIF = file.type === 'image/gif'
        const isPNG = file.type === 'image/png'
        const isBMP = file.type === 'image/bmp'
        if (!isJPG && !isGIF && !isPNG && !isBMP) {
          this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!')
        }
        this.oneLoading = true
        return (isJPG || isBMP || isGIF || isPNG)
      },
      beforeTwoUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isGIF = file.type === 'image/gif'
        const isPNG = file.type === 'image/png'
        const isBMP = file.type === 'image/bmp'
        if (!isJPG && !isGIF && !isPNG && !isBMP) {
          this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!')
        }
        this.twoLoading = true
        return (isJPG || isBMP || isGIF || isPNG)
      },
      handleUploadSuccess(res, file) {
        if (res.code === 101) {
          this.form.enterpriseLogo = res.data[0]
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
          return false
        }
      },
      handleUploadSuccessBanner(res, file) {
        this.oneLoading = false
        if (res.code === 101) {
          const bannerImage = res.data[0]
          const goodsBannerDTOS = this.form.goodsBannerDTOS
          var obj = {
            bannerImage: bannerImage,
            bannerId: null
          }
          goodsBannerDTOS.push(obj)
          this.form.goodsBannerDTOS = goodsBannerDTOS
        }
      },
      handleUploadSuccessQualifications(res, file) {
        this.twoLoading = false
        if (res.code === 101) {
          const imageUrl = res.data[0]
          const enterpriseQualificationsImagesDTOS = this.form.enterpriseQualificationsImagesDTOS
          var obj = {
            imageUrl: imageUrl
          }
          enterpriseQualificationsImagesDTOS.push(obj)
          this.form.enterpriseQualificationsImagesDTOS = enterpriseQualificationsImagesDTOS
        }
      },
      deletePic(item, key) {
        const goodsBannerDTOS = this.form.goodsBannerDTOS
        goodsBannerDTOS.splice(key, 1)
        this.form.goodsBannerDTOS = goodsBannerDTOS
      },
      deleteQualificationsPic(item, key) {
        const enterpriseQualificationsImagesDTOS = this.form.enterpriseQualificationsImagesDTOS
        enterpriseQualificationsImagesDTOS.splice(key, 1)
        this.form.enterpriseQualificationsImagesDTOS = enterpriseQualificationsImagesDTOS
      },
      getdata(evt) {
        // 这里evt.draggedContext后续的内容根据具体的定义变量而定
      },
      datadragEnd(evt) {
        evt.preventDefault()
        const filters = this.form.goodsBannerDTOS
        for (let a = 0; a < filters.length; a++) {
          filters[a].index = a
        }
        this.form.goodsBannerDTOS = filters
      },
      itemOver(index) {
        this.curHover = index
      },
      itemOut(index) {
        this.curHover = index
      },
      itemTwoOver(index) {
        this.curTwoHover = index
      },
      itemTwoOut(index) {
        this.curTwoHover = index
      },
      saveShopSetting() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            // if (this.form.mainCampId.length > 4) {
            //   this.$message({
            //     message: '公司主营最多只能输入4个字',
            //     type: 'error'
            //   })
            //   return
            // }
            // if (this.form.minProfit * 1 > this.form.maxProfit * 1) {
            //   this.$message({
            //     message: '最低收益不能大于最高收益',
            //     type: 'error'
            //   })
            //   return
            // }
            this.listLoading = true
            const data = this.form
            saveShopSetting(data).then(response => {
              if (response.isError) return
              this.listLoading = false
              this.$message({
                message: '保存成功',
                type: 'success'
              })
              this.initEnterprise()
            })
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  .noraml-hide{
    display: none!important;
  }
  .active{
    display: block!important;
  }
  .span-bar{
    padding: 0 50px;
  }
  .remove-btn{
    padding: 7px 6px!important;
  }
  .long-input{
    width: 80%;
  }
  .long-input-2{
    width: 55%;
    margin-right: 5%;
  }
  .long-input-3{
    width: 55%;
  }
  .short-input{
    width: 20%;
  }
  .short-input-2{
    width: 25%;
  }
  .default-input{
    width: 50%;
  }
  .tips{
    color: #999;
    font-size: 12px;
    line-height: 1.2;
    padding-top: 5px;
  }
  .picture{
    width: 148px;
    height: 148px;
    display: block;
  }
  .pic-bar{
    position: relative;
    display: inline-block;
    .close-icon{
      position: absolute;
      right: -30px;
      top: -11px;
      width: 31px;
      height: 40px;
      padding: 0 7px;
      cursor: pointer;
    }
    span{
      position: absolute;
      right: 0;
      bottom: 0;
      width: 100%;
      display: block;
      color: #fff;
      text-align: center;
      padding: 3px 0;
      background: rgba(0,0,0,0.5);
      cursor: pointer;
    }
  }
  .pic-add{
    background: #fff;
    display: inline-block;
    vertical-align: top;
    border: #d3d3d3 1px dashed;
    border-radius: 5px;
    padding: 0 45px;
  }
  .btn-change{
    background: none!important;
    border: none!important;
    box-shadow: 0 0 0!important;
    font-size: 15px!important;
  }
</style>
